<template>
  <div class="box">
    <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="onClickLeft"
      class="header"
    />
    <div class="cart_a">
      <div class="cart_a_bj"></div>
      <div class="cart_a_box">
        <div class="cart_a_box_top">
          <p>{{proList.name}}</p>
          <div>
            <van-icon name="underway-o" class="cart_a_icon" />
            <span v-if="proList.start_show_time">{{proList.start_show_time.substring(0,10)}}&nbsp;{{proList.show_time_bottom}}&nbsp;{{proList.start_show_time.substring(11,16)}}</span>
          </div>
          <div>
            <van-icon name="location-o" class="cart_a_icon" />
            <span v-if="proList.start_show_time">{{proList.city_name}}&nbsp;|&nbsp;{{proList.venue_name}}</span>
          </div>
        </div>
        <div class="cart_a_box_bottom">
          <span>{{num}}&nbsp;张</span>
        </div>
      </div>
    </div>
    <div class="cart_b">
      <div>
        <span>观影人信息</span>
      </div>
      <div>
        <span>姓名</span>
        <input type="text" :placeholder="username">
      </div>
      <div>
        <span>手机号</span>
        <input type="text" :placeholder="usertel">
      </div>
      <p>
        <van-icon name="warning-o" class="icon" />
        观影说明：请在演出前一个小时进场,否则算自动放弃观影
      </p>
    </div>
    <div class="cary_c">
      <div>
        <span>商品金额</span>
        <b>￥{{proList.min_price + '.00'}}</b>
      </div>
      <div>
        <span>运费</span>
        <b>+￥15.00</b>
      </div>
      <div>
        <span>活动/优惠</span>
        <i>暂无任何活动/优惠</i>
      </div>
      <div>
        <span>订单备注</span>
        <input type="text" placeholder="请写备注信息,用于客服发货" v-model="inputVal">
      </div>
      <p>合计:<b>￥{{total + '.00'}}</b></p>
    </div>
    <div class="cart_d">
      <van-radio-group v-model="radio">
        <div class="cart_d_box">
          <span>支付方式</span>
        </div>
        <div class="cart_d_box">
          <van-icon name="chat" color="#03dd6c" class="cart_d_icon" />
          <span>微信支付</span>
          <van-radio name="微信支付" class="radio"></van-radio>
        </div>
        <div class="cart_d_box">
          <van-icon name="alipay" color="#4ba7e8" class="cart_d_icon" />
          <span>支付宝网页支付</span>
          <van-radio name="支付宝支付" class="radio"></van-radio>
        </div>
      </van-radio-group>
    </div>
    <div class="cart_footer">
      <p>我已阅读并同意&nbsp;&nbsp;<b @click="toShow">《聚橙网订票服务条款》</b></p>
      <div>
        <span>应付:<b>￥{{total + '.00'}}</b></span>
        <button @click="addOrder">提交订单</button>
      </div>
    </div>
    <van-action-sheet v-model="show" title="《聚橙网订票服务条款》" class="text">
      <div class="content">
        <p>欢迎您访问聚橙网络技术有限公司（以下简称为“聚橙网”），聚橙网将为您提供项目订票服务，请您阅读并同意《聚橙网订票服务条款》（以下简称为“本订票条款”或“本条款”）。当您点击“同意”后，本条款将在您和聚橙网之间成立并发生法律效力。其中，本条款涉及您重要权益的重点条款会以下划线方式标注，请您重点关注。如对本条款有疑问，您可以随时联系我们的客服人员进行咨询，官方客服电话为：400-185-8666。</p>
        <p>如您对本条款内容有异议，您有权利立即停止订购并拒绝接受聚橙网提供的订票服务。</p>
        <h5>一、本订票条款的成立、生效与取消</h5>
        <p>1、 聚橙网将通过项目展示页向您提供项目的基本信息，视具体项目不同，基本信息可能会有所差异，但一般情况下会包括项目名称、时间、地点、是否支持退票等能让您充分了解项目概况的关键信息。</p>
        <p>2、 聚橙网将通过项目展示页向您提供项目的基本信息，视具体项目不同，基本信息可能会有所差异，但一般情况下会包括项目名称、时间、地点、是否支持退票等能让您充分了解项目概况的关键信息。</p>
        <p>3、 自您在聚橙网成功提交订单之时，本订票条款即成立，即订单成立；自您完成付款之时，本订票条款即正式生效，即订单生效。在您下单后完成付款前，建议您再次确认所订购的票品项目信息是否符合预期，如不符合预期请放弃支付。若您在成功提交订单后的规定时间内（一般是15分钟内）未能完成付款，系统将自动取消该订单，您与聚橙网双方均无需向对方承担任何责任。</p>
        <p>4、 为了保护聚橙网会员的切身利益，对于异常订购行为，聚橙网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形：（1）通过同一ID订购超出限购张数的订单；（2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。</p>
        <h5>二、票品配送及其他</h5>
        <p>1、票品类型：票品一般分为纸质票与电子票两种，不同的项目所提供的票品类型不同，具体以项目展示页上显示信息为准。（1）若您所订购的票品为纸质票，您可以选择快递配送、自取等方式，若您选择快递配送则意味着您同意委托我们安排第三方快递公司（如申通等其他快递公司）为您进行票品配送；无论何种方式，当您获得票品后，请与您的订单仔细核对，若有不符请第一时间联系聚橙网客服。（2）若您所订购的票品为电子票，请您依据不同类型电子票的入场要求提前准备相应的入场凭证，举例来说，普通电子票将以二维码作为入场凭证。电子票为您入场的重要凭证，请您妥善保管，勿将二维码等重要信息泄露给他人。</p>
        <p>2、除展示页明确标明为“实名制”的项目外，项目门票一般系不记名票品，该类不记名票品可以自行转送他人。若因您不慎将不记名票品遗失，您将无法入场观演，亦无法进行补印，因此需要您妥善保管防止遗失。</p>
        <h5>三、项目延迟或取消</h5>
        <p>社会因素和自然因素对于演出/赛事的举办具有决定性的影响，受该类不可抗力因素影响，项目有可能会取消或延迟举办。一旦发生此类情况，聚橙网将主动通知您解决方案，且不会向您收取任何额外费用（座位或区域升级除外）。</p>
        <h5>四、用户自身原因退票、换票</h5>
        <p>项目门票不支持7天无理由退货</p>
        <p>因演出/赛事票品具有稀缺性的特点，一旦退货将会影响二次销售，您理解并认可，聚橙网售出的票品服务不适用7天无理由退货政策。</p>
        </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, RadioGroup, Radio, ActionSheet, Toast } from 'vant'
import { getDetailList, addOrderList, getCartList, removeCartList, getUserInfo } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(RadioGroup)
Vue.use(ActionSheet)
Vue.use(Radio)
Vue.use(Toast)
export default {
  data () {
    return {
      proid: '',
      num: '',
      proList: [],
      text: '快递',
      inputVal: '',
      total: 0,
      radio: '微信支付',
      show: false,
      cartList: [],
      username: '',
      usertel: ''
    }
  },
  mounted () {
    this.proid = this.$route.query.proid
    this.num = this.$route.query.num
    getDetailList({ proid: this.proid }).then(res => {
      // console.log(res)
      this.proList = res.data.data
      this.total = (res.data.data.min_price + 15) * this.num
    })
    getCartList({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        this.cartList = res.data.data
      }
    })
    getUserInfo({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        if (res.data.data[0].nickname !== '请设置昵称') {
          this.username = res.data.data[0].nickname
          this.usertel = res.data.data[0].tel
        } else {
          this.username = ''
          this.usertel = ''
        }
      }
    })
    // 解决路由传参跳转不在头部问题！！
    this.$router.afterEach(() => {
      window.scrollTo(0, 0)
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    toShow () {
      this.show = true
    },
    addOrder () {
      const arr = []
      this.cartList.map(item => {
        if (this.proid.toString() === item.proid) {
          arr.push(item)
        }
      })
      addOrderList({
        userid: localStorage.getItem('userid'),
        orderlist: JSON.stringify(arr),
        Remarks: this.inputVal,
        PaymentMethod: this.radio
      }).then(res => {
        this.$router.replace('/myOrder')
        removeCartList({
          cartid: arr[0].cartid
        }).then(res => {
          // console.log('删除购物车数据')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 100;
  background: white!important;
}
.cart_a {
  margin-top: 0.44rem;
  width: 100%;
  height: 2.25rem;
  overflow: hidden;
  position: relative;
  .cart_a_bj {
    width: 100%;
    height: 1.94rem;
    background-image: linear-gradient(-50deg, #ff4d4a 0%, #ff9a34 100%),linear-gradient(#ff6743, #ff6743);
  }
  .cart_a_box {
    width: calc(100% - 0.3rem);
    height: 2.05rem;
    margin: 0.1rem 0.15rem 0 0.15rem;
    background: white;
    border-radius: 0.05rem;
    position: absolute;
    top: 0;
    box-shadow: 0 4px 4px #eeeeee;
    .cart_a_box_top {
      width: 100%;
      height: 1.1rem;
      border-bottom: 1px dashed #eeeeee;
      p {
        margin-top: 0.27rem;
        margin-bottom: 0.17rem;
        padding: 0 0.2rem;
        height: 0.4rem;
        line-height: 0.2rem;
        font-size: 0.18rem;
        font-weight: bold;
        color: #232323;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      div {
        width: 100%;
        height: 0.25rem;
        line-height: 0.2rem;
        box-sizing: border-box;
        padding: 0 0.2rem 0.05rem 0.2rem;
        .cart_a_icon {
          line-height: 0.2rem;
          font-size: 0.14rem;
          float: left;
        }
        span {
          width: 90%;
          margin-left: 0.05rem;
          line-height: 0.2rem;
          color: #232323;
          float: left;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .cart_a_box_bottom {
      width: 100%;
      height: 0.6rem;
      span {
        height: 0.84rem;
        margin-left: 0.2rem;
        line-height: 0.6rem;
        font-size: 0.16rem;
        color: #232323;
      }
    }
  }
}
.cart_b {
  width: 100%;
  height: 2.26rem;
  box-sizing: border-box;
  padding: 0 0.15rem;
  border-bottom: 0.12rem solid #eeeeee;
  div {
    width: 100%;
    height: 0.56rem;
    border-bottom: 1px solid #ebebeb;
    line-height: 0.56rem;
    span {
      display: block;
      width: 0.8rem;
      font-size: 0.16rem;
      color: #232323;
      float: left;
    }
    input {
      float: left;
      border: none;
      height: 0.54rem;
    }
  }
  p {
    width: 100%;
    height: 0.16rem;
    margin: 0.15rem 0;
    line-height: 0.16rem;
    font-size: 0.12rem;
    color: #999999;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
.cary_c {
  width: 100%;
  height: 2.92rem;
  box-sizing: border-box;
  padding: 0 0.15rem;
  border-bottom: 0.12rem solid #eeeeee;
  div {
    width: 100%;
    height: 0.56rem;
    border-bottom: 1px solid #ebebeb;
    line-height: 0.56rem;
    span {
      font-size: 0.14rem;
      color: #666666;
      float: left;
    }
    b {
      font-size: 0.14rem;
      color: #666666;
      float: right;
      font-weight: normal;
    }
    i {
      float: right;
      border: 1px solid #ff6743;
      border-radius: 0.03rem;
      height: 0.18rem;
      padding: 0 0.03rem;
      font-size: 0.12rem;
      font-weight: normal;
      margin-top: 0.19rem;
      line-height: 0.18rem;
      color: #ff6743;
    }
    input {
      float: right;
      border: none;
      height: 0.54rem;
      text-align: right;
    }
  }
  div:nth-of-type(1) {
    span {
      font-size: 0.14rem;
      color: #232323;
    }
    b {
      font-size: 0.16rem;
      color: #000000;
    }
  }
  p {
    line-height: 0.56rem;
    font-size: 0.16rem;
    color: #232323;
    font-weight: bold;
    float: right;
    b {
      color: #ff6743;
    }
  }
}
.cart_d {
  width: 100%;
  height: 2.8rem;
  box-sizing: border-box;
  padding: 0 0.15rem;
  border-bottom: 1.12rem solid #eeeeee;
  .cart_d_box {
    width: 100%;
    height: 0.56rem;
    line-height: 0.56rem;
    border-bottom: 1px solid #ebebeb;
    .cart_d_icon {
      font-size: 0.24rem;
      float: left;
      line-height: 0.56rem;
    }
    span {
      float: left;
      font-size: 0.16rem;
      color: #232323;
      margin-left: 0.05rem;
    }
    .radio {
      width: 0.25rem;
      float: right;
      height: 0.56rem;
    }
  }
}
.cart_footer {
  position: fixed;
  bottom: 0;
  height: 0.8rem;
  width: 100%;
  z-index: 1000;
  p {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    padding: 0.05rem 0.15rem;
    line-height: 0.2rem;
    font-size: 0.12rem;
    color: #999999;
    background: white;
    b {
      font-weight: normal;
      color: #ff6743;
    }
  }
  div {
    width: 100%;
    height: 0.5rem;
    background: white;
    border-top: 1px solid #ebebeb;
    span {
      float: left;
      width: 50%;
      height: 100%;
      line-height: 0.5rem;
      font-size: 0.16rem;
      color: #232323;
      font-weight: bold;
      text-align: center;
      b {
        color: #ff6743;
      }
    }
    button {
      float: left;
      width: 50%;
      height: 100%;
      font-size: 0.16rem;
      color: white;
      border: none;
      background-image: linear-gradient(-50deg, #ff4d4a 0%, #ff9a34 100%),linear-gradient(#ebebeb, #ebebeb);
    }
  }
}
.text {
  height: 4.6rem;
  width: 100%;
  border-radius: 0.08rem 0.08rem 0 0;
  box-sizing: border-box;
  padding: 0 0.15rem 0.4rem 0.15rem;
  .content {
    h5 {
      line-height: 0.28rem;
      font-size: 0.16rem;
      color: #232323;
      font-weight: bold;
    }
    p {
      line-height: 0.24rem;
      font-size: 0.14rem;
      color: #232323;
      text-indent: 0.26rem
    }
  }
}
/deep/ .van-icon-arrow-left {
  color: black;
  font-size: 0.2rem;
}
/deep/ .van-action-sheet__header {
  position: sticky;
  top: 0;
  background: white;
  line-height: 0.6rem;
  text-align: left;
  font-size: 0.2rem;
}
</style>
